<template>
	<view class="page-display">
		<image class="element bg" mode="scaleToFill" :src="backgroundImage"></image>
		<view class="front">
			<Element v-for="element in screenElementList" :key="element.id" class="element" :element="element" />
		</view>

		<view class="element version">
			编号：{{screen.id}} - 版本号：{{version}}
		</view>
		<!-- <view style="position: fixed;top: 100px;left:20px,z-index:1000;width: 200px;color: red">
			 {{size}}
		</view> -->
	</view>
</template>

<script setup>
	import OfflineData from '/common/offline-data-cache.js'
	import {
		getImageCache
	} from '/common/image-cache.js'
	import {
		version
	} from '@/common/config.js'
	import Element from '/pages/LayoutDisplay/com/Element.vue'

	import {
		ref,
		provide,
		computed,
		onMounted
	} from 'vue'

	const props = defineProps({
		responseData: {
			type: Object,
			default: () => ({})
		}
	})

    const responseData = computed(()=>{
		return props.responseData
	})
	provide('responseData', responseData)

	// 计算属性
	const screenElementList = computed(() => {
		return OfflineData.screenElementList();
	})
	
	const screen = computed(() => {
		return OfflineData.screen()
	})
    const backgroundImage = ref('')
	onMounted(async ()=>{
		const path = OfflineData.getScreenSetting('background')
		const localPath = await getImageCache(path);
		backgroundImage.value = localPath;
	})
	const backgrounImage = computed(() => {
		
	})
</script>

<style scoped>
	.page-display {
		width: 100vw;
		height: 100vh;
	}

	.bg {
		width: 100%;
		height: 100%;
	}

	.front {
		position: relative;
		width: 100%;
		height: 100%;
	}

	.element {
		position: absolute;
	}

	.facility-status {
		position: absolute;
		right: 20rpx;
		padding: 0 30rpx;
		border: white 6rpx solid;
		border-radius: 40rpx;
		height: 40rpx;
		background-color: rgb(105, 210, 30);
		line-height: 40rpx;
		color: white;
	}

	.ad-zone {
		right: 20rpx;
		top: 160rpx;
		height: 300rpx;
	}

	.layout-zone {
		left: 150rpx;
		top: 500rpx;
		height: 400rpx;
	}

	.version {
		position: absolute;
		right: 20rpx;
		bottom: 0;
		color: white;
		font-size: 14rpx;
	}
</style>